import { defineStore } from 'pinia'
import { ref } from 'vue'

export const usePopupStore = defineStore(
  'Popup',
  () => {
    /** 弹窗位置 */
    const right = ref<'100%' | '0'>(
      localStorage.getItem('popupState')
        ? (localStorage.getItem('popupState') as '100%' | '0')
        : '100%'
    )
    /** 弹窗标题 */
    const storeTitle = ref<'添加留言' | '留言详情' | ''>()
    /** 弹窗详情id */
    const card = ref<number>()
    /** 图片预览 */
    const url = ref<string>()
    /** 关闭弹窗 */
    const close = () => {
      right.value = '100%'
      card.value = 0
    }
    /** 打开弹窗 */
    const open = (title: '添加留言' | '留言详情', id?: number, image?: string) => {
      storeTitle.value = title
      right.value = '0'
      if (id) card.value = id
      if (image) url.value = image
    }

    return { right, open, close, storeTitle, card, url }
  },
  {
    persist: {
      storage: sessionStorage,
      pick: ['right', 'storeTitle', 'card', 'url']
    }
  }
)
